<script setup>
import {ref,reactive} from "vue"
let userInfo=reactive({
    userName:"",
    password:'',
    province:'',
    hobbies:[],
    gender:''
})

let login=()=>{
    if(userInfo.userName=="张飞"){
    alert('登录');
}else{
    alert('不是张飞用户，登录失败')
}
}

let clearx=()=>{
    userInfo.gender='';
    userInfo.hobbies=[]
}
</script>

<template>
    <div>
    用户名<input type="text" v-model="userInfo.userName"><br>
    密码<input type="password" v-model="userInfo.password"><br>
    <select v-model="userInfo.province">
        <option value="jing">京</option>
        <option value="广">广</option>
        <option value="hai">海</option>
        <option value="shen">深</option>
    </select>
    <br>
    <!-- 多选框 -->
     <input type="checkbox" value="eat" v-model="userInfo.hobbies">吃
     <input type="checkbox" value="drink" v-model="userInfo.hobbies">喝
     <input type="checkbox" value="sing" v-model="userInfo.hobbies">唱
     <input type="checkbox" value="dance" v-model="userInfo.hobbies">跳
     <br>
     <!-- 单选框 -->
     <input type="radio" name="gender" value="man" v-model="userInfo.gender">男
        <input type="radio" value="women" name="gender" v-model="userInfo.gender">女
<br>
<button @click="login()">登录</button>
<button @click="clearx">重置</button>



    {{ userInfo }}
</div>
</template>

<style scoped>

</style>
